<template>
  <el-form ref="form" :model="form" :rules="rules" class="form" label-position="left" :inline=true>
    <el-form-item label="姓名 :" prop="name" class="form-item" required>
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="人数 :" prop="number" class="form-item" required>
      <el-input v-model.number="form.number"></el-input>
    </el-form-item>
    <el-form-item label="时间 :" prop="time" class="form-item" required>
      <el-select v-model="form.time" placeholder="请选择活动时间" @change="selectTime" v-loading="loading">
        <el-option v-for="item in times" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交报名</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  import axios from 'axios';

  /**
   * 报名参加活动表格
   */
  export default {
    name: 'Form',
    data() {
      return {
        form: {
          name: '',
          number: '',
          time: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
          number: [
            { required: true, message: '人数不能为空', trigger: 'blur' },
            { type: 'number', message: '人数必须为数字值', trigger: 'blur' }
          ],
          time: [
            { required: true, message: '请选择活动时间', trigger: 'change' }
          ],
        }
      }
    },
    props:[
      'times',
      'loading'
    ],
    methods: {
      submitForm(formName) {
        let me = this;
        let url = 'http://127.0.0.1:1111/api/participant/add';
        this.$refs[formName].validate((valid) => {
          let form = me.form;
          if (valid) {
            var formData = {
              name: form.name,
              number: form.number,
              aid: form.time
            };
            axios.post(url,formData).then(function (response) {
              me.$message({
                type: 'success',
                message: '报名成功'
              });
              me.$emit('addApplycant',formData);
              me.resetForm(formName);
            }).catch(function(err){
            });
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      selectTime(value){
        this.$emit('changeTime',value);
      }
    },
  }
</script>
<style>
  .form {
    font-size: 14px;
    color: #000000;
    letter-spacing: 0;
    line-height: 21px;
  }
  .form .form-item {
    display: block;
  }
  .form input, .form select {
    width: 211px;
    height: 36px;
    background: #FFFFFF;
    border-radius: 2px;
  }
  .form input, .form select, .form input:focus, .form select:focus {
    border: 1px solid #D9D9D9;
  }
  .form button, .form button:hover, .form button:active, .form button:focus {
    background: #00BC7E;
  }
  .form button {
    width: 274px;
    height: 44px;
    border-radius: 2px;
    color: #ffffff;
  }
  .form label {
    padding-right: 16px;
  }
</style>
